<template>
	<view>
		<view class="detail_top">
			<view class="detail_ful">
				<view class="ful_left">
					线路编号
				</view>
				<view class="ful_right">

				</view>
			</view>
			<view class="detail_ful">
				<view class="ful_left">
					分配员
				</view>
				<view class="ful_right">

				</view>
			</view>
			<view class="detail_ful">
				<view class="ful_left">
					联系电话
				</view>
				<view class="ful_right">

				</view>
			</view>
			<view class="detail_ful">
				<view class="ful_left">
					巡检时间
				</view>
				<view class="ful_right">
					2022-5-31—2022-5-06
				</view>
			</view>
		</view>
		<block v-if="type==1">
			<view class="content_ful title_ content">
				<view class="content_left ">
					巡检建筑
				</view>
				<view class="content_right ">
					状态
				</view>
			</view>
			<view class="content_ful" @tap="jumpDetailed" v-for="(item,index) in list" :key='index'>
				<view class="content_left ">
					{{item.add}}
				</view>
				<view class="content_right ">
					{{item.status}}
				</view>
			</view>
		</block>
		<block v-else-if="type==2">
			<view class="ful row">
				<view class="ful_left">
					报警确认:
				</view>
				<view class="ful_right row a-center">
					<view class="ful_radio  row a-center ml-5" @tap="chioceMethods(index,0)"
						v-for="(item,index)  in  alarmAcknowledgement" :key='index'>
						<image :src="item.icon" mode=""></image>
						<text>{{item.title}}</text>
					</view>
				</view>
			</view>
			<view class="ful row">
				<view class="ful_left">
					误报原因:
				</view>
				<view class="ful_right row a-center">
					<view class="ful_radio  row a-center ml-5" @tap="chioceMethods(index,1)"
						v-for="(item,index)  in  misreport" :key='index'>
						<image :src="item.icon" mode=""></image>
						<text>{{item.title}}</text>
					</view>
				</view>
			</view>
			<view class="ful row">
				<view class="ful_left">
					处理方式:
				</view>
				<view class="ful_right row a-center">
					<view class="ful_radio  row a-center ml-5" @tap="chioceMethods(index,2)"
						v-for="(item,index)  in  treatmentMethod" :key='index'>
						<image :src="item.icon" mode=""></image>
						<text>{{item.title}}</text>
					</view>
				</view>
			</view>
			<view class="ful row ">
				<view class="ful_left">
					误报内容:
				</view>
				<view class="ful_right row a-center">
					<view class="ful_radio  row a-center ml-5" @tap="chioceMethods(index,3)"
						v-for="(item,index)  in  reportIncorrectly" :key='index'>
						<image :src="item.icon" mode=""></image>
						<text>{{item.title}}</text>
					</view>
				</view>
			</view>
			<view class="division">
			</view>
			<view class="row j-sb ful_new">
				<view class="ful_left">
					备注
				</view>
				<view class="ful_right row a-center">
					<input type="text" value="" placeholder="输入备注内容（非必填）" />
				</view>
			</view>
			<view class="upImg">
				<view class="upImg_title">
					上传图片({{upimages.length}}-3张）
				</view>
				<view class="upImg_files" @tap="upImgs">
					选择文件+
				</view>
			</view>
			<image :src="item" mode="" v-for="(item,index) in upimages" :key='index'></image>
			<view class="btn">
				提交
			</view>
		</block>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				//1 巡检路线   2报警单
				type: 1,
				//报警单 上传图片
				upimages: [],
				//报警单  报警确认
				alarmAcknowledgement: [{
					title: '真实火警',
					icon: '/static/icon/icon7.png'
				}, {
					title: '误报',
					icon: '/static/icon/icon7.png'
				}, {
					title: '测试',
					icon: '/static/icon/icon7.png'
				}],

				//报警单  误报原因
				misreport: [{
					title: '设备故障',
					icon: '/static/icon/icon7.png'
				}, {
					title: '其它',
					icon: '/static/icon/icon7.png'
				}],
				//报警单  误报原因
				treatmentMethod: [{
					title: '现场处理',
					icon: '/static/icon/icon7.png'
				}, {
					title: '上报工单',
					icon: '/static/icon/icon7.png'
				}],
				//报警单  误报内容
				reportIncorrectly: [{
					title: '油烟',
					icon: '/static/icon/icon7.png'
				}, {
					title: '吸烟',
					icon: '/static/icon/icon7.png'
				}, {
					title: '粉尘',
					icon: '/static/icon/icon7.png'
				}, {
					title: '水蒸气',
					icon: '/static/icon/icon7.png'
				}, {
					title: '其它',
					icon: '/static/icon/icon7.png'
				}],
				//报警单  选择项目   索引对应 0报警确认  1误报方式   2处理方式  3误报内容  
				alarmSheetArr: [null, null, null, null],
				//维保单位  巡检路线  列表
				list: [{
					add: '高新国际广场A座1楼左侧',
					status: '未检'
				}, {
					add: '高新国际广场A座1楼左侧',
					status: '未检'
				}, {
					add: '高新国际广场A座1楼左侧',
					status: '未检'
				}, {
					add: '高新国际广场A座1楼左侧',
					status: '未检'
				}, {
					add: '高新国际广场A座1楼左侧',
					status: '未检'
				}, {
					add: '高新国际广场A座1楼左侧',
					status: '未检'
				}]
			}
		},
		onLoad() {
			if (this.type == 1) {
				uni.setNavigationBarTitle({
					title: '路线详情'
				})
			} else if (this.type == 2) {
				uni.setNavigationBarTitle({
					title: '报警单详情'
				})
			}
		},
		methods: {

			//路线详情 跳转
			jumpDetailed() {
				wx.navigateTo({
					url: '../xunjian_detailed/xunjian_detailed'
				})
			},
			//报警单  报警确认  category  0报警确认  1误报方式   2处理方式  3误报内容
			chioceMethods(i, category) {
				this.alarmSheetArr[category] = i + 1
				switch (category) {
					case 0:
						this.alarmAcknowledgement = this.foreachArr(this.alarmAcknowledgement, i)
						break;
					case 1:
						this.misreport = this.foreachArr(this.misreport, i)
						break;
					case 2:
						this.treatmentMethod = this.foreachArr(this.treatmentMethod, i)
						break;
					case 3:
						this.reportIncorrectly = this.foreachArr(this.reportIncorrectly, i)
						break;
				}
			},
			//报警单  选择项 自定义方法
			foreachArr(arr, i) {
				arr.forEach((item, index) => {
					if (i == index) {
						item.icon = '/static/icon/icon7ed.png'
					} else {
						item.icon = '/static/icon/icon7.png'
					}
				})
				return arr
			},
			//报警单  图片上传
			upImgs() {
				uni.chooseImage({
					count: 3,
					success: (res) => {
						if (res.tempFilePaths.length + this.upimages.length > 3) {
							uni.showToast({
								icon: 'none',
								duration: 1500,
								title: '最多只能上传3张图片哦！'
							})
						} else {
							this.upimages = this.upimages.concat(res.tempFilePaths)
						}
					},
					fail: (err) => {
						uni.showToast({
							title: '图片上传失败，请重试',
							icon: 'none',
							duration: 1500
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.btn {
		height: 92rpx;
		background: #4252CD;
		border-radius: 46rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		text-align: center;
		line-height: 92rpx;
		margin: 50rpx 30rpx;
	}

	.upImg_files {
		border-radius: 10rpx;
		border: 2rpx solid #B6B6B6;
		color: #B6B6B6;
		padding: 10rpx 20rpx;
	}

	.upImg_title {
		color: #7F8084;
	}

	.upImg {
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		line-height: 40rpx;
		display: flex;
		align-items: center;
		margin: 36rpx 30rpx;
	}

	.ful_new {
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #7F8084;
		line-height: 40rpx;
		margin: 0rpx 30rpx;
		padding: 38rpx 0;
		border-bottom: 2rpx solid #EFEFEF;
	}

	.division {
		box-sizing: border-box;
		margin: 0 30rpx;
		border-bottom: 2rpx solid #EFEFEF;
	}

	.ful_radio {
		color: #7F8084;
		margin-bottom: 20rpx;

		image {
			width: 32rpx;
			height: 32rpx;
			margin-right: 10rpx;
		}
	}

	.ful {
		padding: 30rpx 30rpx 10rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #7F8084;
		line-height: 40rpx;

		.ful_left {
			color: #7F8084;
			width: 120rpx;
		}

		.ful_right {
			color: #474747;
			flex: 1;
		}
	}

	.content_right {
		flex: 1;
		min-width: 0;
	}

	.content_left {
		flex: 2;
		min-width: 0;
	}

	.content_ful {
		padding: 20rpx 30rpx;
		display: flex;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #7F8084;
		line-height: 40rpx;
	}

	.content_ful:nth-child(2n-1) {
		background-color: #F9F9F9;
	}

	.content_ful:nth-child(2n) {
		background-color: #EFEFEF;
	}

	.content {
		margin-top: 22rpx;
	}

	.detail_top {
		background-color: #4053CD;
		padding: 0 30rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #A9B4FF;
		line-height: 40rpx;
	}

	.detail_ful {
		padding: 17rpx 0;
		display: flex;
		justify-content: space-between;
	}




	.title_ {
		color: #474747;
		padding: 16rpx 30rpx;
	}
</style>
